<script setup lang="ts">
import { reactive, ref, onMounted } from "vue"
import { getCompanyTimeApi, CompanyBillCountListApi } from "@/api/bill"
import bill from "./components/bill.vue"
import notFinished from "./components/notFinished.vue"
import historynotFinished from "./components/historynotFinished.vue"
import dayjs from "dayjs"
import completed from "./components/completed.vue"

const loading = ref<boolean>(false)
const listBool = ref<boolean>(false)
const tableData = ref<any[]>([])
const billRef = ref<any>(undefined)

const currentDate = dayjs()
onMounted(() => {
  getCompanyTime()
  CompanyBillCountLists()
})
const getCompanyTime = () => {
  loading.value = true
  getCompanyTimeApi(formInline)
    .then((res: any) => {
      if (res.data.length > 0) {
        tableData.value = res.data
        listBool.value = true
      }
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
}
const CompanyBillCountLists = () => {
  CompanyBillCountListApi()
    .then((res: any) => {
      console.log(res)
      todays.value = res.data.today
      history.value = res.data.history
    })
    .catch(() => {})
    .finally(() => {})
}

const formInline = reactive({
  date: currentDate.format("YYYY-MM-DD"),
  company_name: ""
})

// const onSubmit = () => {
//   tableData.value = []
//   listBool.value = false
//   getCompanyTime()
// }

// const handleCompany = (el: any) => {
//   if (billRef.value) {
//     billRef.value.showClick(el)
//   }
// }
//#region el-tabs
import type { TabsPaneContext } from "element-plus"
const activeName = ref("second")
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
//#endregion

const todays = ref<number>(0)
const history = ref<number>(0)
</script>

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane name="second">
        <template #label>
          <el-badge :value="todays" class="badge" :hidden="todays === 0">
            <span>待完结客户</span>
          </el-badge>
        </template>
        <not-finished />
      </el-tab-pane>
      <el-tab-pane label="已结账客户" name="completeds"><completed /></el-tab-pane>
      <el-tab-pane name="historynotFinisheds">
        <template #label>
          <el-badge :value="history" class="badge" :hidden="history === 0">
            <span>历史待结账</span>
          </el-badge>
        </template>
        <historynot-Finished />
      </el-tab-pane>
      <!-- <el-tab-pane label="公司统计" name="first">
        <el-card v-loading="loading" shadow="hover" class="search-wrapper">
          <template #header>
            <div class="card-header">
              <div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="查询时间">
                    <el-date-picker
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      v-model="formInline.date"
                      type="date"
                      placeholder="请选择"
                    />
                  </el-form-item>
                  <el-form-item label="公司名称">
                    <el-input v-model="formInline.company_name" placeholder="请输入" clearable />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <div v-if="listBool" class="sourceList">
            <div v-for="(item, index) in tableData" :key="index" class="template">
              <div class="sourceTitle" @click="handleCompany(item)">
                <div class="sourceTitleBox">公司名称：{{ item.company_name }}</div>
                <div class="sourceTitleBox">总数：{{ item.enter_count + item.out_count }}</div>
                <div class="sourceTitleBox">贴现：{{ item.enter_count }}</div>
                <div class="sourceTitleBox">买票：{{ item.out_count }}</div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无数据" />
        </el-card>
      </el-tab-pane> -->
    </el-tabs>

    <bill ref="billRef" />
  </div>
</template>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 20px;
  }
}
.sourceList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.template {
  width: 50%;
  display: flex;
  justify-content: center;
}
.template:nth-child(2n + 1) {
  height: 50%;
  border-right: 1px solid #b3b3b3; /* 竖线样式，可以根据需要调整 */
}
.sourceTitle {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
}
.sourceTitleBox {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  &:hover {
    background-color: #409eff;
    color: #fff;
  }
  &.active {
    background-color: #409eff;
    color: #fff;
  }
}

/* 在 scoped 样式中使用 :deep(样式名) 选择器穿透样式隔离 */
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  background-color: #fff;
}

.badge {
  margin-right: 8px;
}
</style>
